<!--提币-->
<template>
  <div class="all bg1" @viewappear="viewappear" @rightBtn="rightBtn">
    <scroller class="all">

      <div class="wrapper" v-if="coin">

        <!--选择币-->
        <div class="coin bg2" @click="selectClick">
          <text v-if="coin" class="font30 fontz text2">{{coin.symbol}}</text>
          <text v-else class="font30 fontz text3">{{'选择币种'}}</text>
          <LImage class="img-arrow" :src="Config.img('youjin.png')"></LImage>
        </div>
      
        <div class="content bg2">

            <!--链名称-->
          <text class="font30 fontz text2 mb20">{{'链名称'}}</text>
          <div class="row mb40">
            <div class="lian-but main-b1">
              <text class="font30 fontz main-t1">{{coin.chain}}</text>
            </div>
          </div>

          <!--提币地址-->
          <text class="font30 text2">{{T('提币地址')}}</text>
          <div class="row acenter">
            <input class="input font30 text2 all" v-model="toAddress" type="text" :placeholder="T('输入提币地址')">
            <LImage class="img-scanCode" :src="Config.img('v2_saoma.png')" @click="scanCode"></LImage>
          </div>
          <div class="line line1 mb40"></div>

          <!--提币数量-->
          <text class="font30 text2">{{T('提币数量')}}</text>
          <div class="row acenter">

            <input class="input font30 text2 all" v-model="amount" type="number" 
            :placeholder="T('输入提币数量')" maxlength="12" @input="onInput">

            <div class="width10"></div>
            <text class="font26 main-t1" @click="allClick">{{T('全部')}}</text>
          </div>
          <div class="line line1 mb30"></div>


          <!--可用余额-->
          <div class="row jbetween mb10">
            <text class="font22 text3">{{T('可提')}}</text>
            <text class="font22 text2">{{moneyNum+" "+coin.symbol}}</text>
          </div>

          <!-- <div class="row jbetween mb10">
            <text class="font22 text3">{{T('手续费')}}</text>
            <text class="font22 text2">{{coin.minFee+" "+coin.symbol}}</text>
          </div> -->

          <div class="row jbetween">
            <text class="font22 text3">{{T('实际到账')}}</text>
            <text class="font22 text2">{{toAmount+" "+coin.symbol}}</text>
          </div>
        </div>

        <div class="tipe">
          <text class="font24 fontz main-t1">{{'提示'}}</text>
          <text class="font24 text2 line-height40">{{T('1、请您务必在提币操作前，仔细核对提币地址信息，避免造成 不必要的财产损失。')}}</text>
        </div>
          
        <!--提币-->
        <div class="but main-bt1" @click="okClick">
          <text class="font30 text1">{{T('提币')}}</text>
        </div>
      </div>
    </scroller>

    <!--确认弹窗-->
    <div class="confirm" v-if="isConfirm">

      <div class="confirm-content bg2">
        <text class="font36 text2 title mb30">{{T('确认提币')}}</text>
        
        <div class="row mb20">
          <text class="font30 text3 title">{{T('提币地址')+"："}}</text>
          <text class="font30 text2 all">{{toAddress}}</text>
        </div>

        <div class="row mb20">
          <text class="font30 text3 title">{{T('提币数量')+"："}}</text>
          <text class="font30 text2">{{amount+" "+coin.symbol}}</text>
        </div>

        <!-- <div class="row mb20">
          <text class="font30 text3 title">{{T('手续费')+"："}}</text>
          <text class="font30 text2">{{" "+coin.symbol}}</text>
        </div> -->

        <div class="row">
          <text class="font30 text3 title">{{T('到账数量')+"："}}</text>
          <text class="font30 text2">{{toAmount+" "+coin.symbol}}</text>
        </div>

        <div class="row">
          <div class="cofirm-but" @click="isConfirm=false">
            <text class="font30 main-t1">{{T('取消')}}</text>
          </div>
          <div class="cofirm-but"  @click="txClick">
            <text class="font30 main-t1">{{T('确认')}}</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https";
import japi from "@/_js/api";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('提币'));
weexFunction.setRightBtn(T('提币记录'));

export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,      
      
      exchangeName:'', //交易所名称
      api: undefined,

      coins:undefined, //支持币数组
      coin:undefined, //当前选中币

      toAddress:'', //提币地址 TFP2CtwvqFQwNhcN4sCjFBZwDkhMBBJW4S
      amount:'', //提币数量
      moneyNum:'0', //可用余额
      toAmount:'0', //到账数量
      isConfirm:false, //true确认提币
    };
  },

  created() {
    var param = weex.config;
    this.api = param.api;
    this.exchangeName = param.exchangeName;

    this.httpsGetWithdrawalInfo();
  },

  methods: {

    initData(coins) {

      coins.forEach((coin)=>{
        coin.minFee = '0';
        coin.chain = 'ERC20';
      });
      this.coins = coins;
      this.coin = this.coins[0];
    },

    //更新API可用
    upMoney() {

      var num = '0';
      for (let index = 0; index < this.api.accountAssets.length; index++) {
        var assets = this.api.accountAssets[index];
        if (assets.currency == this.coin.symbol) {
          weexFunction.debugLog(assets)
          num = jmath.gfCoin(assets.totalNum, this.coin.symbol);
          break;
        }
      }
        
      this.moneyNum = num < 0 ? '0' : num;
    },
    
    /************************************************* 通信触发*/
    //完全显示
    viewappear() {
    },

    //右按钮触发
    rightBtn()  {
      var param = {'exchangeName':this.exchangeName};
      jnavigator.open("", "home/BkTxRecord", param);
    },

    /************************************************* HTTP*/
    //http获取提币信息
    httpsGetWithdrawalInfo(){

      jmodal.showLoad();
      var param = {};
      jhttps.post("uniswap/getWithdrawalInfo",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){

          try {
            var symbols = data.data.symbols;
            this.initData(symbols);
            this.upMoney();
          } catch (error) {}
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /*******************************输入框回调*/ 
    //输入内容改变
    onInput(e){
      var toAmount = jmath.jian(this.amount, this.coin.minFee);
      this.toAmount = toAmount < 0 ? '0' : toAmount;
    },

    /*******************************其他方法*/ 
    //校验地址
    checkAddress (toAddress) {
      
      toAddress = toAddress.toUpperCase();
      var chainName = this.coin.chain.toUpperCase();
      if (chainName.indexOf('ERC20') >= 0) {
        
        //0x0123456789012345678901234567890123456789
        var bol = toAddress.length == 42 &&  toAddress.startsWith('0X');
        return bol;
      }  else if (chainName.indexOf('TRC20') >= 0) {
        //T123456789'
        var bol = toAddress.length == 34 &&  toAddress.startsWith('T');
        return bol;
      } else {
        return true;
      }
    },

    /************************************************* 点击*/
    //选择币
    selectClick(){

      var coins = [];
      var coind = {};
      for (let index = 0; index < this.coins.length; index++) {
        var item = this.coins[index];
        coins.push(item.symbol);
        coind[item.symbol] = item;
      }

      jmodal.actionSheet(coins, this.coin.symbol, (value)=>{
        this.coin = coind[value];
        this.upMoney();
      });
    },

    //扫码
    scanCode(){
      this.toScanCode =false;
      weexFunction.scanCode((selected)=>{
        var bol = this.checkAddress(selected);
        if(bol) {
          this.toAddress = selected;
        } else {
          jmodal.toast(T('提币地址无法识别，请通过粘贴方式输入'));
        }
      });
    },
    
    //全部
    allClick(){
      this.amount = this.moneyNum;
      this.onInput();
    },

    //提币
    okClick(){

      if (this.toAddress.length == 0) {
        jmodal.toast(T('请输入提币地址'));
        return;
      }
      
      if (!this.checkAddress(this.toAddress)) {
        jmodal.toast(T('提币地址错误'));
        return;
      }
      
      if (parseFloat(this.amount.length) == 0) {
        jmodal.toast(T('请输入提币数量'));
        return;
      }

      if (parseFloat(this.amount) == 0) {
        jmodal.toast(T('提币数量不可为0'));
        return;
      }
      
      if(parseFloat(this.amount) > this.moneyNum){
        jmodal.toast(T('可用余额不足'));
        return;
      } 
      
      this.isConfirm = true;
    },

    //提币
    txClick() {

      this.isConfirm = false;
      var map = {'exchangeName':this.exchangeName,
                'amount':this.amount,
                'symbol':this.coin.symbol,
                'fromAddress':this.coin.address,
                'toAddress':this.toAddress};
      var param = {'param':map};
      jnavigator.open("","home/BkTxVerify", param);
    }
  }
}
</script>


<style src="@/_css/style.css" ></style>
<style scoped>
.wrapper{
  padding: 30px 20px;
}

/******************** 币 */
.coin {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 98px;
  border-radius: 24px;

  padding: 0 40px;
  margin-bottom: 40px;
}
.img-arrow{
  width:16px;
  height:16px;
}

/******************** 内容 */
.content {
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 30px;
}
.lian-but {
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 70px;
  background-color: rgba(22,119,254,0.1);
  border-radius: 6px;
  border-width: 2px;
}
.lian-b{
  border-color: rgba(22,119,254,0.1);
}

.line-height40 {
  line-height: 40px;
}

/************************** 输入框*/
.img-scanCode{
  width:60px;
  height:60px;
  margin-left: 10px;
}
.input{
  height:80px;
  placeholder-color:#6E7488; 
}
.line {
  height: 1;
}
.tipe {
  padding: 10px;
}
.but{
  justify-content: center;
  align-items: center;
  height:80px;
  border-radius:12px;
  margin-top: 90px;
}

/************************** 确认弹窗*/
.confirm {
  position: absolute;
  justify-content: center;
  align-items: center;
  top:0;
  right: 0;
  bottom:0;
  left:0;
  background-color:rgba(0,0,0,0.4);
}
.confirm-content{
  width:630px;
  border-radius:12px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  padding-bottom: 20px;
}
.cofirm-but {
  justify-content: center;
  align-items: center;
  height:80px;
  flex: 1;

  margin-top: 20px;
}
.title {
  min-width: 160px;
}
</style>
